<extend name="User/index"/>
<block name="pageAddStatic">
    <script src="__JSPLUGINS__/Validform_v5.3.2.js"></script>
    <style type="text/css">
        .you{
            padding-right: 3em;
            position: relative;
            margin-top: 5px;
        }
        .Validform_wrong{
            color: red;
        }
    </style>
</block>
<block name="pageContent">
    <form action="{:U('detailEdit')}" method="post" id="registerform" enctype="multipart/form-data">
    <div class="pagem-con">
    <ul>
        <li class="you">
            <label class="zuo juxi">个人头像</label>
            <div class="genlk center-top" style="background:none;">
                <input id="upload" type="file" name="headimgurl" accept="image/*"/>
                <a href="javascript:;"><h5><img id="preview" src="<?php echo $user['headimgurl'] ? $user['headimgurl'] : "__IMG__/user/portrait.jpg";?>" alt="头像"></h5></a>
                <!--<a id="photo" <if condition="$user['headimgurl']">style="background-image: url('{$user['headimgurl']}');"</if>></a>-->
            </div>
        </li>
        <li class="you">
            <label class="zuo">邮箱</label>
            <div class="fsad">
              <input class="input2" value="{$user.email}" name="email" type="text" datatype="e">
            </div>
        </li>
        <!--<li class="you">-->
            <!--<label class="zuo">账户</label>-->
            <!--<div class="fsad">-->
              <!--<input class="input2" value="{$user.username}" name="username" type="text" datatype="*">-->
            <!--</div>-->
        <!--</li>-->
        <li class="you">
            <label class="zuo">手机</label>
            <div class="fsad">
              <input class="input2" value="{$user.mobile}" name="mobile" type="text" datatype="m">
            </div>
        </li>
        <li class="you">
            <label class="zuo">姓名</label>
            <div class="fsad">
              <input class="input2" value="{$user.nickname}" name="nickname" type="text" datatype="*">
            </div>
        </li>
        <li class="btn you" style="margin-top:10px;"><a href="javascript:;" onclick="javascript:$('#registerform').submit();">确定</a></li>
    </ul>
    </div>
    </form>
</block>
<block name="pageJavascript">
<script>
        // 验证表单
        $("#registerform").Validform({tiptype:3,showAllError:true});

        $(function() {
            $("#upload").change(function() {
                var $file = $(this);
                var fileObj = $file[0];
                var windowURL = window.URL || window.webkitURL;
                var dataURL;
                var $img = $("#preview");

                if(fileObj && fileObj.files && fileObj.files[0]){
                    dataURL = windowURL.createObjectURL(fileObj.files[0]);
                    $img.attr('src',dataURL);
                }else{
                    dataURL = $file.val();
                    var imgObj = document.getElementById("preview");
// 两个坑:
// 1、在设置filter属性时，元素必须已经存在在DOM树中，动态创建的Node，也需要在设置属性前加入到DOM中，先设置属性在加入，无效；
// 2、src属性需要像下面的方式添加，上面的两种方式添加，无效；
                    imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                    imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;

                }
            });
        });
</script>
</block>